<template>
  <div class="timu">
    <div class="aspace">
      <a-space :size="20">
        <a-input
          :style="{ width: '320px' }"
          @keyup.enter="list(formData)"
          placeholder="标题"
          v-model="formData.title"
          allow-clear
        />
        <a-input
          :style="{ width: '320px' }"
          @keyup.enter="list(formData)"
          placeholder="标签"
          v-model="formData.content"
          allow-clear
        />
        <a-button type="primary" @click="list(formData)">查询</a-button>
        <a-button @click="handleReset">重置</a-button>
      </a-space>
    </div>
    <div class="atable">
      <a-card>
        <a-table
          :columns="columns"
          :data="data"
          :pagination="{ total }"
          @page-change="handlePageChange"
        >
          <template #titleLinkSlot="{ record }">
            <a-link @click="handleTitleClick(record.id)"
              >{{ record.title }}
            </a-link>
          </template>
          <template #tagslot="{ record }">
            <a-tag
              v-for="e in record.tagList"
              :key="e"
              color="arcoblue"
              style="margin: 2px"
              >{{ e }}
            </a-tag>
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { Question, QuestionControllerService } from "../../../generated";
import { useRoute, useRouter } from "vue-router";

let formData = reactive({
  current: 1,
  title: "",
  content: "",
});
// 记录总数
const total = ref(10);
// 列名
const columns = [
  {
    title: "标题",
    align: "left",
    dataIndex: "title",
    slotName: "titleLinkSlot",
  },
  {
    title: "标签字段",
    align: "left",
    dataIndex: "tagList",
    slotName: "tagslot",
  },
];
// 表格数据
const data = reactive([]);
const router = useRouter();

function list(args: any) {
  QuestionControllerService.listQuestionByPageUsingPost({
    ...args,
  }).then((res) => {
    data.length = 0;
    total.value = res.data.total;
    Object.assign(data, res.data.records);
  });
}

function clearContent() {
  Object.assign(formData, {
    current: 1,
    title: "",
    content: "",
  });
}

function handleReset() {
  clearContent();
  list(formData);
}

function handlePageChange(page: number) {
  formData.current = page;
  list(formData);
}

function handleTitleClick(id: string) {
  router.push({ path: "/questionDetail", query: { id: id } });
}

onMounted(() => {
  list(formData);
});
</script>

<style scoped>
.timu {
  margin: 0px 150px 0px 150px;
}

.atable {
  margin-top: 20px;
}
</style>
